<template>
	<view class="page flex-col">
		<!-- 背景图 -->
		<view class="bg-layer"></view>
		
		<view class="box_1 flex-col justify-between">
			<view class="block_3 flex-col">
				<!-- 顶部标题栏 -->
				<view class="box_15 flex-row">
					<view class="icon-back" @click="goBack">
						<text class="uni-icons">&#xe471;</text>
					</view>
					<text class="text_2">性格测试</text>
					<!-- 占位，保持标题居中 -->
					<view class="right-placeholder"></view>
				</view>
				
				<!-- 进度指示器 -->
				<view class="text-wrapper_1 flex-row">
					<text class="text_3">{{ currentQuestionIndex + 1 }}</text> 
					<text class="text_4">/{{ totalQuestions }}</text>
				</view>
				
				<!-- 进度条 -->
				<view class="box_5 flex-col">
					<view class="box_6 flex-col" :style="{ width: progressWidth + '%' }"></view>
				</view>
				
				<!-- 问题区域 -->
				<view class="box_17 flex-row justify-between">
					<view class="group_4 flex-col"></view>
					<view class="text-group_3 flex-col justify-between">
						<text class="text_5">第{{ currentQuestionIndex + 1 }}题：</text>
						<text class="text_6">{{ currentQuestion.content }}</text>
					</view>
				</view>
				
				<!-- 选项区域 -->
				<view class="options-container">
					<view 
						v-for="(option, index) in currentQuestion.options" 
						:key="index"
						class="option-item flex-row"
						:class="{ 'option-selected': isSelected(index) }"
						@click="selectOption(index)"
					>
						<text class="option-label" :class="{ 'text-selected': isSelected(index) }">{{ option.label }}.</text>
						<view class="option-content flex-row justify-between">
							<text class="option-text" :class="{ 'text-selected': isSelected(index) }">{{ option.text }}</text>
							<!-- 选中时的图标 -->
							<view v-if="isSelected(index)" class="box_9 flex-col"></view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部操作栏 -->
			<view class="box_10 flex-col" v-if="currentQuestionIndex < totalQuestions - 1">
				<view class="text-wrapper_4 flex-col" @click="handlePrevious">
					<text class="text_12" v-if="currentQuestionIndex > 0">上一题</text>
					<text class="text_12" v-else @click.stop="goBack">返回</text>
				</view>
			</view>
			
			<!-- 最后一题底部按钮 (双按钮) -->
			<view class="box_10_last flex-row justify-between" v-else>
				<view class="btn-prev flex-col" @click="handlePrevious">
					<text class="text_12_white">上一题</text>
				</view>
				<view class="btn-submit flex-col" @click="submitTest">
					<text class="text_12_white">查看结果</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentQuestionIndex: 0,
				totalQuestions: 5,
				answers: [], // 存储用户选择的答案索引
				questions: [
					// 模拟20道题目数据
					{
						content: "假如你在咖啡馆等朋友，在对方到来之前，你会：",
						options: [
							{ label: "A", text: "先点一些甜点饮料什么的" },
							{ label: "B", text: "从书架上找本书看" },
							{ label: "C", text: "趴着睡觉" }
						]
					},
					// 填充剩余题目... 为了演示，这里重复使用
				]
			}
		},
		computed: {
			currentQuestion() {
				return this.questions[this.currentQuestionIndex];
			},
			progressWidth() {
				return ((this.currentQuestionIndex + 1) / this.totalQuestions) * 100;
			}
		},
		onLoad() {
			// 初始化20道题
			if (this.questions.length < 20) {
				const template = this.questions[0];
				for (let i = 1; i < 20; i++) {
					this.questions.push({
						...template,
						content: `第${i + 1}题：${template.content}`
					});
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			isSelected(index) {
				return this.answers[this.currentQuestionIndex] === index;
			},
			selectOption(index) {
				// 记录答案
				this.$set(this.answers, this.currentQuestionIndex, index);
				
				// 自动跳转下一题（延迟一下让用户看到选中效果）
				setTimeout(() => {
					if (this.currentQuestionIndex < this.totalQuestions - 1) {
						this.currentQuestionIndex++;
					} else {
						// 最后一题，完成测试
						uni.showToast({
							title: '测试完成',
							icon: 'success'
						});
						// setTimeout(() => {
						// 	uni.navigateTo({
						// 		url: '/pages/emotion-test/test-result'
						// 	});
						// }, 1500);
					}
				}, 300);
			},
			handlePrevious() {
				if (this.currentQuestionIndex > 0) {
					this.currentQuestionIndex--;
				} else {
					this.goBack();
				}
			},
			submitTest() {
				uni.showToast({
					title: '测试完成',
					icon: 'success'
				});
				// setTimeout(() => {
				// 	uni.navigateTo({
				// 		url: '/pages/emotion-test/test-result'
				// 	});
				// }, 1500);
			}
		}
	}
</script>

<style scoped>
	/* 通用 Flex 类 */
	.flex-col {
		display: flex;
		flex-direction: column;
	}
	
	.flex-row {
		display: flex;
		flex-direction: row;
	}
	
	.justify-between {
		justify-content: space-between;
	}
	
	/* 页面整体 */
	.page {
		position: relative;
		width: 750rpx;
		height: 100vh;
		background-color: rgba(255, 255, 255, 1);
		overflow: hidden;
	}
	
	.bg-layer {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng46716da63fb91eadf6d84b13f94fe5d1e378cb8f96e397d98f594d317011ea58) 100% no-repeat;
		background-size: 100% 100%;
		z-index: 0;
	}
	
	.box_1 {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
	}
	
	.block_3 {
		width: 100%;
	}
	
	/* 导航栏 */
	.box_15 {
		width: 100%;
		height: 88rpx;
		margin-top: var(--status-bar-height);
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	
	.icon-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
	}
	
	.right-placeholder {
		width: 60rpx;
	}
	
	.text_2 {
		color: rgba(31, 31, 31, 1);
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		font-weight: bold;
	}
	
	/* 进度显示 */
	.text-wrapper_1 {
		width: 94rpx;
		height: 44rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bd243bc88f9cb0420c45d06be9690bf00b4e178cd6090add2d116919ae4e67a) 100% no-repeat;
		background-size: 100% 100%;
		margin: 24rpx 0 0 38rpx;
		align-items: center;
		justify-content: center;
	}
	
	.text_3 {
		color: rgba(0, 200, 200, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Medium;
		font-weight: bold;
	}
	
	.text_4 {
		color: rgba(31, 31, 31, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Medium;
	}
	
	/* 进度条 */
	.box_5 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 6rpx;
		height: 14rpx;
		width: 662rpx;
		margin: 4rpx 0 0 44rpx;
		overflow: hidden;
	}
	
	.box_6 {
		height: 100%;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng726eeb4484928f14adaf26ba6c38c512b600d66f3f93f2e697413bee4571954f) 0px -2rpx no-repeat;
		background-size: cover;
		transition: width 0.3s ease;
	}
	
	/* 题目内容 */
	.box_17 {
		width: 642rpx;
		margin: 78rpx 0 0 44rpx;
	}
	
	.group_4 {
		width: 8rpx;
		height: 34rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngca53dabbc6a5a8056258bfe5c1437b8915515a2326677dc7454c8e12405c45ca) -8rpx -4rpx no-repeat;
		background-size: 24rpx 50rpx;
		margin-top: 12rpx;
	}
	
	.text-group_3 {
		width: 622rpx;
		margin-left: 20rpx;
	}
	
	.text_5 {
		color: rgba(31, 31, 31, 1);
		font-size: 44rpx;
		font-family: PingFangSC-Medium;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.text_6 {
		color: rgba(31, 31, 31, 1);
		font-size: 36rpx;
		font-family: PingFangSC-Regular;
		line-height: 50rpx;
	}
	
	/* 选项列表 */
	.options-container {
		margin-top: 60rpx;
		padding: 0 40rpx;
	}
	
	.option-item {
		width: 100%;
		min-height: 100rpx; /* 增加高度 */
		border-radius: 18rpx;
		border: 3rpx solid rgba(237, 237, 237, 1);
		margin-bottom: 30rpx;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		align-items: flex-start;
	}
	
	.option-selected {
		border-color: rgba(255, 101, 164, 1);
		box-shadow: 0 8rpx 28rpx 0 rgba(122, 0, 60, 0.09);
		background-color: #FFF0F5;
	}
	
	.option-label {
		color: rgba(31, 31, 31, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Regular;
		margin-right: 20rpx;
		flex-shrink: 0;
	}
	
	.option-content {
		flex: 1;
		align-items: center;
	}
	
	.option-text {
		color: rgba(31, 31, 31, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Regular;
		line-height: 44rpx;
	}
	
	.text-selected {
		color: rgba(255, 101, 164, 1);
	}
	
	/* 选中图标 */
	.box_9 {
		width: 46rpx;
		height: 50rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng18c98c4ad4f7847b54a6c323a6b26332d5cfe3b6780339a42282a87af26b40ec) 100% no-repeat;
		background-size: 100% 100%;
		margin-left: 20rpx;
	}
	
	/* 底部按钮 */
	.box_10 {
		height: 240rpx; /* 增加底部空间 */
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd4536dea0a1257eb60f07a84d97574fd58e739a59c22ca85a4fa21630f6f4948) 100% no-repeat;
		background-size: 100% 100%;
		justify-content: center;
		align-items: center;
	}
	
	.text-wrapper_4 {
		width: 632rpx;
		height: 100rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng31a35b4702674111e733a8d9b09b2d1cf85d6412e9d217d028712597fb769d31) 0 0 no-repeat;
		background-size: 100% 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}
	
	.text_12 {
		color: rgba(31, 31, 31, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		font-weight: bold;
	}
	
	/* 最后一题底部布局 */
	.box_10_last {
		height: 240rpx;
		padding: 0 40rpx;
		align-items: center;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd4536dea0a1257eb60f07a84d97574fd58e739a59c22ca85a4fa21630f6f4948) 100% no-repeat;
		background-size: 100% 100%;
	}
	
	.btn-prev {
		width: 300rpx;
		height: 100rpx;
		background-color: #4DD0E1; /* 青色 */
		border-radius: 50rpx;
		align-items: center;
		justify-content: center;
		box-shadow: 0 10rpx 20rpx rgba(77, 208, 225, 0.3);
	}
	
	.btn-submit {
		width: 300rpx;
		height: 100rpx;
		background-color: #FFD740; /* 黄色 */
		border-radius: 50rpx;
		align-items: center;
		justify-content: center;
		box-shadow: 0 10rpx 20rpx rgba(255, 215, 64, 0.3);
	}
	
	.text_12_white {
		color: #FFFFFF; /* 白色文字，非设计稿黑色，可根据实际调整 */
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		font-weight: bold;
	}
</style>
